<template>
	<view class="list">
		<u-navbar title="公告列表" @leftClick="leftClick" :autoBack="true">
		</u-navbar>
		<view class="" :style="{ height: navBarHeight + 'px' }"></view>

		<view v-if="dataList.length>0" v-for="(item,index) in dataList" class="listitem">
			<view v-if="index == 0" class="title">
				最新活动
			</view>
			<view class="content">
				【活动公告】{{item.content}}
			</view>
			<view v-if="item.url" class="imgBox">
				<image v-for="(imgitem,imgindex) in item.url" class="imgitem" :src="imgitem"
					style="width: 200rpx;height: 156rpx;" @click="handleImgBig(imgitem)" />
			</view>
			<view class="datatime">
				{{item.created_at}}
			</view>
		</view>

		<view v-else class="">
			<u-empty text="暂无公告" icon="news">
			</u-empty>
		</view>


	</view>
</template>

<script>
	import {
		noticeList,userInfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				dataList: [],
				navBarHeight: 0,
				city:"",
			}
		},
		onLoad() {
			let res = wx.getSystemInfoSync(); //系统信息
			let custom = wx.getMenuButtonBoundingClientRect() //胶囊按钮位置信息
			this.navBarHeight = (custom.top - res.statusBarHeight) * 2 + custom.height + 44 //计算得出导航栏高度
			this.getUserInfo()
			let that = this
			setTimeout(()=>{
				that.getNoticeList()
			},500)
		},
		methods: {
			handleImgBig(url) {
				uni.previewImage({
					current: 0,
					urls: [url] //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
		async getUserInfo() {
			let res = await userInfo()
			console.log("用户信息", res)
			if (res.code == 1000) {
				this.city = res.data.city
			}
		},
			async getNoticeList() {
				console.log("城市",this.city)
				let res = await noticeList({
					city:this.city
				})
				console.log("公告", res)
				if (res.code == 1000) {
					this.dataList = res.data.data
					this.dataList.forEach((item, index) => {
						if(item.url){
							item.url = item.url.split(",")
						}
					})
					console.log("this.dataList", this.dataList)
				}

			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 30rpx;

		.listitem {
			width: 100%;
			padding: 24rpx;
			background-color: #F2F2F2;
			box-sizing: border-box;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 24rpx;

			.title {
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 50rpx;
			}

			.content {
				width: 638rpx;
				background: linear-gradient(135deg, #FF4E4E 0%, rgba(255, 78, 78, 0.62) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 35rpx;
			}

			.imgBox {
				margin-top: 24rpx;
				display: flex;
				flex-wrap: wrap;

				.imgitem {
					margin-right: 18rpx;
				}

				.imgitem:nth-child(3n) {
					margin-right: 0;
					margin-bottom: 18rpx;
				}
			}

			.datatime {
				margin-top: 24rpx;
			}
		}
	}
</style>